<template>
  <div>
    <SearchForm @get="handleSearch"></SearchForm>
    <br />
    <Table
      bordered
      :data-source="dataSource"
      :columns="tagColumns"
      :pagination="false"
      :scroll="scroll"
      class="main-table"
      :loading="loading"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'action'"
          ><span v-per="'update'"> <a @click="handleEdit(record)">编辑</a> </span>
        </template>
      </template>
    </Table>
    <br />
    <Pagination
      show-size-changer
      v-model:current="current"
      v-model:pageSize="pageSize"
      :total="total"
      :show-total="(total) => `共 ${total} 条`"
      @showSizeChange="onShowSizeChange"
    />

    <EditTag ref="drawerSwitch" @get="getDataSource"></EditTag>
  </div>
</template>
<script lang="ts" setup>
import { Table, Pagination, message } from 'ant-design-vue';
import { ref, watch } from 'vue';
import { getTagTable } from '/@/api/upgrade-center/grayscale/tagManagement/tagManagement';
import SearchForm from '/@/views/upgrade-center/grayscale/tagManagement/component/searchForm.vue';
import EditTag from '/@/views/upgrade-center/grayscale/tagManagement/component/editTag.vue';
import { tagColumns } from '/@/views/upgrade-center/grayscale/tagManagement/data';
const dataSource = ref();
const scroll = ref<undefined | object>(undefined);
const loading = ref(true);
let current = ref(1);
const total = ref<number>(0);
const pageSize = ref(10);
let params = {
  componentIdList: [],
  routeLinkKeyList: [],
  namespaceList: [],
  current: current.value,
  size: pageSize.value,
};
const getDataSource = async () => {
  try {
    let res = await getTagTable(params);
    dataSource.value = res.items;
    total.value = res.total;
  } catch (error) {
    message.error(error.message);
  } finally {
    loading.value = false;
  }
};
getDataSource();

const onShowSizeChange = (current: number, pageSize: number) => {
  params.size = pageSize;
  params.current = current;
  getDataSource();
};
watch(pageSize, (val) => {
  if (val > 10) {
    scroll.value = { y: 500 };
  }
  params.size = pageSize.value;
});
watch(current, () => {
  params.current = current.value;
  getDataSource();
});
// 编辑
const drawerSwitch = ref();
const handleEdit = (record) => {
  drawerSwitch.value.openEdit(record);
};
// 处理查询重置
const handleSearch = (searchParams) => {
  params = {
    componentIdList: searchParams.componentIdList,
    routeLinkKeyList: searchParams.routeLinkKeyList,
    namespaceList: searchParams.namespaceList,
    current: current.value,
    size: pageSize.value,
  };
  getDataSource();
};
</script>
<style lang="less">
.ant-pagination {
  float: right;
}
</style>
